<template>
    <div class="ecg">
      <WebHeader />

      <div class="ecg-container">
        <div class="top">
          <div class="top-label">
            <template v-for="(item,index) in careLevelList">
              <div class="top-label__item" :key="index">
                <div class="top-label__item-text" :class="item.cricleColor">{{ item.label }}</div>
                <div class="top-label__item-num">{{ item.num }}</div>
              </div>
            </template>
          </div>
          <div class="top-tabs">
              <div :class="!toggleItem ? 'top-tabs__btn-active':'top-tabs__btn'" @click="toggleTabs(true)">心电监护信息</div>
              <div :class="toggleItem ? 'top-tabs__btn-active':'top-tabs__btn'" @click="toggleTabs(false)">输液信息</div>
          </div>
        </div>
        
        <!-- 心电监护信息 -->
        <EcgList v-show="toggleItem" />
        
        <!-- 输液信息 -->
        <InfusionList v-show="!toggleItem" />
      </div>
      <WarnDialog ref="warn-dialog" />
    </div>
</template>
<script>
import WebHeader from '@/components/WebHeader'
import EcgList from './components/EcgList'
import InfusionList from './components/InfusionList'
import WarnDialog from './dialog/WarnDialog'

export default {
  data () {
    return {
      ecgLists: [],
      infusionList: [],
      toggleItem: true,
      careLevelList: [{
        label: '特级护理',
        num: 0,
        cricleColor: 'super-color'
      },
      {
        label: '一级护理',
        num: 0,
        cricleColor: 'first-color'
      },{
        label: '二级护理',
        num: 0,
        cricleColor: 'second-color'
      },{
        label: '三级护理',
        num: 0,
        cricleColor: 'third-color'
      }],

      healthData: {
        temperature: '',        // 体温
        bloodpressure: '',      // 血压
        heartbeat: '',          // 心率
        bloodoxygen: '',        // 血氧
      },

      infuseTimer: null,
      userInfo: {},
      formDate: ''
    }
  },
  components: {
    EcgList,
    InfusionList,
    WarnDialog,
    WebHeader
  },
  created () {
    this.init()
  },
  mounted () {

  },
  watch: {
    'careLevelList.num' (num) {
      if (!num === 0) {
        return
      }
      if (num === 9) {
        this.careLevelList[0].num = 1
        return
      }
      this.careLevelList[num].num = 1
    }
  },
  methods: {
    init () {
      this.getUserInfo()
      
    },

    getUserInfo () {
      this.$http.post('/zyb/web/v3/getUserInfo').then(res => {
        this.userInfo = { ...res.data }
        this.careLevelList = { ...this.careLevelList, num: res.data.nurse_grade }
      })
    },

    // tabs 切换
    toggleTabs (boolean) {
        this.toggleItem = boolean
    },
    
    showWarnDialog () {
      this.$refs['warn-dialog'].showDialog()
    }
  },
}
</script>

<style lang="scss" scoped>
.ecg {
  padding-bottom: 30px;
  background-color: #F7F9FB;
}

.ecg-header {
    background: #388FFB;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 28px 56px;
    &__title {
        display: flex;
        flex-direction: row;
        align-items: center;
        &-ward {
            font-size: 36px;
            font-weight: 500;
            margin-right: 24px;
        }
        &-sickbed {
            font-size: 32px;
            font-weight: 400;
        }
        &-emptybed {
            color: #FF8900;
        }
    }
    &__time {
        font-size: 36px;
        font-weight: 500;
    }
}

.ecg-container {
    background: #FFFFFF;
    margin: 30px 30px 0px 30px;
    padding: 36px 24px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.02);
    .top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        &-label {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            &__item {
                display: flex;
                flex-direction: row;
                margin-right: 72px;
                &-text {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    font-size: 30px;
                    font-weight: 400;
                    color: #666666;
                    margin-right: 16px;
                }
                &-num {
                    font-size: 40px;
                    font-weight: 600;
                    line-height: 56px;
                    color: #333333;
                }
                .super-color {
                    &::before {
                        content:'';
                        display: block;
                        margin-right: 16px;
                        width: 14px;
                        height: 14px;
                        background: #BF1414;
                        border-radius: 50%;
                    }
                }
                .first-color {
                    @extend .super-color;
                    &::before {
                        background: #ED8484;
                    }
                }
                .second-color {
                    @extend .super-color;
                    &::before {
                        background: #FF8900;
                    }
                }
                .third-color {
                    @extend .super-color;
                    &::before {
                        background: #51C424;
                    }
                }
            }
        }
        &-tabs {
            display: flex;
            flex-direction: row;
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            line-height: 49px;
            &__btn {
                width: 176px;
                height: 49px;
                background: #388FFB;
                border-radius: 6px;
                color: #FFFFFF;
                margin-left: 16px;
            }
            &__btn-active {
                width: 176px;
                height: 49px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 6px;
                color: #000000;
                margin-left: 16px;
            }
        }
    }
}

</style>